<template>
  <div class="goods_data">
    <div class="goods_photo">
      <img src="https://i1.mifile.cn/f/i/18/mi8yong/gallery_list1_2.jpg" alt="">
    </div>


    <div class="goods_detail">
      <p class="goods_name">小米8 青春版</p>
      <div class="progress">
        <x-progress :percent="percent1" :show-cancel='false'></x-progress>
      </div>
      <div class="join_total">
        <span>当前已有843人次参与</span>
        <span>满1000人次就开奖！</span>
      </div>
      <p class="goods_text">潮流镜面渐变色/2400万自拍旗舰/7.5mm超薄机身/6.26"小刘海全面屏/AI裸妆美颜/骁龙660AIE处理器。</p>
    </div>

    <div class="cell_box">
      <group>
        <cell title="活动规则" is-link :border-intent="false" :arrow-direction="showContent001 ? 'up' : 'down'" @click.native="showContent001 = !showContent001"></cell>

        <div class="slide slide1" :class="showContent001?'animate':''">
          <div>


            1、本次秒杀活动为中国电信天翼用户专享。
            <br> 2、活动期间使用任何舞弊行为的用户一经发现，即刻取
            <br> 3、每日秒杀的礼品数量有限，秒完即止。秒杀礼品
            <br> 4、每名用户每天可成功参与一次秒杀，活动期间每名用
            <br> 5、在成功秒杀后，用户需提供真实信息。
            <br> 6、所有礼品将在活动结束后的15个工作日内免费寄出。
            <br>

          </div>
        </div>


        <cell title="商品信息" is-link :border-intent="false" :arrow-direction="showContent002 ? 'up' : 'down'" @click.native="showContent002 = !showContent002"></cell>

        <div class="slide slide2" :class="showContent002?'animate':''">

          商品信息 商品信息 商品信息 商品信息 商品信息 商品信息

        </div>


        <cell title="参与详情" is-link :border-intent="false" :arrow-direction="showContent003 ? 'up' : 'down'" @click.native="showContent003 = !showContent003"></cell>

        <div class="slide  slide3" :class="showContent003?'animate':''">

          <div class="table">
            <x-table full-bordered style="background-color:#fff;">
              <thead>
                <tr>
                  <th>用户</th>
                  <th>时间</th>
                  <th>购买次数</th>
                </tr>
              </thead>
              <tbody>
                <tr v-for="item in 6" :key="item.id">
                  <td>文*迪</td>
                  <td>20181012171682</td>
                  <td>888</td>
                </tr>

              </tbody>
            </x-table>

          <div class="page">
            <mo-paging 
            :page-index="currentPage" 
            :total="count" 
            :page-size="pageSize" 
            @change="pageChange">
            </mo-paging>

          </div>


          </div>
          <!-- table -->

        </div>
        <!-- slide3 -->

      </group>
    </div>
    <!-- cell_box -->
     <div class="bottom">
        <p class="gold">500金币/次</p>
        <!-- <router-link class="btn" to="/JoinDraw">马上参加</router-link> -->
        <div class="time">
            <span>距离还有</span>
            <span>{{time}}</span>
        </div>
     </div>
      <div class="bottom_fill">

      </div>

  </div>
</template>

<script>
import { XProgress, Cell, Group, XTable } from "vux";
import MoPaging from "@/components/MoPaging.vue";
import { setInterval } from "timers";

export default {
  components: {
    XProgress,
    Cell,
    Group,
    XTable,
    MoPaging
  },
  data() {
    return {
      create_time: 1540312088000,
      percent1: 84.3,
      showContent001: false,
      showContent002: false,
      showContent003: false,
      showContent004: false,
      time: 0,
      pageSize: 20, //每页显示20条数据
      currentPage: 1, //当前页码
      count: 100 //总记录数
    };
  },
  methods: {
    pageChange(page) {
      this.currentPage = page;
      console.log(page);
    },

    InitTime(create_time) {
      var dd,
        hh,
        mm,
        ss = null;

      var time = parseInt(create_time) - new Date().getTime();

      if (time <= 0) {
        return "结束";
      } else {
        dd = Math.floor(time / 1000 / 60 / 60 / 24);
        hh = Math.floor((time / 1000 / 60 / 60) % 24);
        mm = Math.floor((time / 1000 / 60) % 60);
        ss = Math.floor((time / 1000) % 60);
        if(hh<10) hh='0'+hh
        if(mm<10) mm='0'+mm
        if(ss<10) ss='0'+ss
        var str = dd + "天 " + hh + ":" + mm + ":" + ss;
        return str;
      }
    }
  },
  mounted() {
    setInterval(() => {
      this.time = this.InitTime(this.create_time);
    }, 1000);
  },
  created(){
    this.time = this.InitTime(this.create_time);
  }
};
</script>

<style scoped lang="less">
@import "../style/base.less";
.goods_data {
  .goods_photo {
    img {
      width: 100%;
      height: 100%;
    }
  }

  .goods_detail {
    background: #fff;
    padding: 24 / @px;

    .goods_name {
      font-size: 42 / @px;
      margin-bottom: 12 / @px;
    }
    .join_total {
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin-top: 8 / @px;
      span {
        color: #ff0032;
      }
    }
    .goods_text {
      margin-top: 20 / @px;
      font-size: 26 / @px;
      color: #666;
    }
  }

  .cell_box {
    .slide {
      background: #f5f5f5;
      padding: 0 20 / @px;
      overflow: hidden;
      max-height: 0;
      transition: max-height 0.5s cubic-bezier(0, 1, 0, 1) -0.1s;
    }

    .animate {
      max-height: 9999px;
      transition-timing-function: cubic-bezier(0.5, 0, 1, 0);
      transition-delay: 0s;
    }

    .slide1 {
      font-size: 26 / @px;
      div {
        padding: 20 / @px 25 / @px 30 / @px;
      }
    }

    .slide2 {
    }
    .slide3 {
      .table {
        margin: 24 / @px;
        text-align: center;
        .page {
          margin: 20 / @px 0;
          display: inline-block;
        }
      }
    }
  }

  .bottom_fill {
    width: 100%;
    height: 88 / @px;
  }
  .bottom {
    z-index: 111;
    background: #fff;
    border-top: 1px solid #e6e6e6;
    width: 100%;
    height: 88 / @px;
    position: fixed;
    bottom: 0;
    left: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 36 / @px;
    .gold {
      line-height: 88 / @px;

      color: #ff0032;
      padding-left: 26 / @px;
    }
    .btn {
      text-align: center;
      color: #1a1a1a;
      width: 264 / @px;
      line-height: 88 / @px;
      background: #ffdb4f;
    }
    .time {
      width: 410 / @px;
      border-radius: 26 / @px;
      border: 1px solid #ffdb4f;
      overflow: hidden;
      font-size: 30 / @px;
      margin-right: 24 / @px;
      span:first-child {
        display: inline-block;
        text-align: center;
        width: 186 / @px;
        background: #ffdb4f;
      }
    }
  }
}
</style>